<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="set">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">key</button>
</body>
<script>
    // webStorage => H5新增存储数据的方式(网页存储)

    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 (存储大小5M 也可以跨页面访问(默认存储在站点根目录 整个网站都可以访问)   提供了专门操作数据的方法(API => 快捷实现数据的增删改查))

    // ## WebStorage两个主要目标：
    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和 sessionStorage（会话存储）  => 全局对象


    // 如何查看WebStorage?
    // 1. 手动查看 (方便调试)
    // 开发者工具 => application(应用) =>  Storage =>  localStorage（本地存储）和 sessionStorage

    // 2. JS查看   全局对象(window可省略)
    console.log(window.localStorage);
    console.log(window.sessionStorage);

    // localStorage（本地存储）和 sessionStorage 的属性和方法
    // 属性:
    // length  存储数据的条数

    // 方法:
    // setItem(key,value)   对应键名存储数据(没有就新增 有就修改)
    // getItem(key)         对应键名获取数据
    // removeItem(key)      对应键名删除数据
    // clear()              清除所有数据
    // key()                传入一个下标,返回对应的键名


</script>

</html>